<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="referrer" content="no-referrer">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <link rel="shortcut icon" href="../image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4726301_lc8vfqar3a.css">
    <link rel="stylesheet" href="../style/public.css">
    <title>文章详情</title>
    <style>
        .user img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .gz {
            background: #2178c9;
            color: #fff;
            padding: 3px 10px;
            border-radius: 15px;
        }

        .item-img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }

        .input {
            border: 1px solid #e5e5e5;
            border-radius: 15px;
            height: 35px;
            width: 65%;
            margin-right: 15px;
        }
    </style>
</head>

<body class="bafff pa10 lh15">
    <div id="app">

        <div>
            <h1 class="f22 fwb">{{ obj.h1 }}</h1>
        </div>
        <div class="fcb mt-10">
            <div class="user fl aic">
                <img :src="obj.icon" alt="">
                <span class="ml-10 f16">{{ obj.name }}</span>
            </div>
            <span class="gz f14 fcc" @click="concern()">
                <i class="iconfont icon-jiahao f12 mr-3"></i>
                关注
            </span>
        </div>
        <div class="content mt-20">
            <div v-if="obj.imgUrl">
                <p class="f14">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ obj.content[0].cont1 }}
                </p>
                <img class="w100p" :src="obj.imgUrl[0].url1" alt="">
                <p class="f14">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ obj.content[0].cont2 }}
                </p>
                <img class="w100p" :src="obj.imgUrl[0].url2" alt="">
                <p class="f14">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ obj.content[0].cont3 }}
                </p>
                <img class="w100p" :src="obj.imgUrl[0].url3" alt="">
                <p class="f14">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ obj.content[0].cont4 }}
                </p>
                <img class="w100p" :src="obj.imgUrl[0].url4" alt="">
                <p class="f14">
                    &nbsp;&nbsp;&nbsp;&nbsp;{{ obj.content[0].cont5 }}
                </p>
                <img class="w100p" :src="obj.imgUrl[0].url5" alt="">
                <p class="f14">&nbsp;&nbsp;&nbsp;&nbsp;{{ obj.content[0].cont6 }}</p>
            </div>
            <div v-if="obj.videoUrl" class=" mt-20">
                <video class="w100p" :src="obj.videoUrl" controls loop autoplay preload="auto"></video>
            </div>
        </div>

        <p class="c666">发布于：{{ obj.time }}</p>

        <div class="comments mt-20">
            <h1 class="f16 fwb mb-20">全部评论 · {{ obj.comments }}</h1>
            <div v-for="(item, index) in obj.userComments" class="comm-item">
                <div class="fl aic mt-10">
                    <img class="item-img" :src="item.userIcon" alt="">
                    <span class="ml-10 f14">{{ item.userName }}</span>
                </div>
                <div class="mt-10">
                    <p class="ml-30 f14">{{ item.comment }}</p>
                </div>
                <div class="fl jcfe aic">
                    <i class="iconfont icon-icon"></i>
                    <span class="ml-2 f14">{{ item.browse }}</span>
                </div>
            </div>

            <p class="fcc mt-20 c666">查看更多评论<i class="iconfont icon-xiangyoujiantou1 f12"></i></p>
        </div>
        <div class="mt-20" style="height: 40px;"></div>
        <footer>
            <div class="fl aic h50 fixed bo0 w100p bafff">
                <input type="text" placeholder="请输入评论内容" class="input f14 ml-10 pl-20">
                <div class="">
                    <i class="iconfont icon-icon f24 ce71 mr-3 tsan" @click="tsan()"></i>
                    <i class="iconfont icon-shoucang f24 cba mr-5"></i>
                    <i class="iconfont icon-fenxiang f20 c075"></i>
                </div>
            </div>
        </footer>

    </div>
    <script src="../js/axios.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/vue2.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                obj: {}
            },
            created() {
                const id = location.href.split('?')[1].split('=')[1];
                if (id < 9) {
                    axios.get(`http://localhost:3888/essay?id=${id}`).then(res => {
                        this.obj = res.data[0];
                        this.storeData(res.data[0]);
                    });
                } else if (id >= 9 && id <= 13) {
                    axios.get(`http://localhost:3888/hot?id=${id}`).then(res => {
                        this.obj = res.data[0]
                        this.storeData(res.data[0]);
                    });
                } else {
                    axios.get(`http://localhost:3888/energy?id=${id}`).then(res => {
                        this.obj = res.data[0]
                        this.storeData(res.data[0]);
                    });
                }
            },
            methods: {
                storeData(data) {
                    axios.post('http://localhost:3888/footprint', data)
                },
                tsan() {
                    const iconElement = document.querySelector('.tsan');
                    iconElement.addEventListener('click', function () {
                        this.className = this.className.replace('icon-icon', 'icon-dianzan');
                    });
                    const id = location.href.split('?')[1].split('=')[1];
                    if (id < 9) {
                        axios.get(`http://localhost:3888/essay?id=${id}`).then(res => {
                            this.liveData(res.data[0]);
                        });
                    } else if (id >= 9 && id <= 13) {
                        axios.get(`http://localhost:3888/hot?id=${id}`).then(res => {
                            this.liveData(res.data[0]);
                        });
                    } else {
                        axios.get(`http://localhost:3888/energy?id=${id}`).then(res => {
                            this.liveData(res.data[0]);
                        });
                    }
                },
                liveData(data){
                    axios.post('http://localhost:3888/live', data)
                },
                concern(){
                    const $concernSpan = $('.gz');
                    $concernSpan.html('已关注');
                    const id = location.href.split('?')[1].split('=')[1];
                    if (id < 9) {
                        axios.get(`http://localhost:3888/essay?id=${id}`).then(res => {
                            this.concernData(res.data[0]);
                        });
                    } else if (id >= 9 && id <= 13) {
                        axios.get(`http://localhost:3888/hot?id=${id}`).then(res => {
                            this.concernData(res.data[0]);
                        });
                    } else {
                        axios.get(`http://localhost:3888/energy?id=${id}`).then(res => {
                            this.concernData(res.data[0]);
                        });
                    }
                },
                concernData(data){
                    axios.post('http://localhost:3888/concern', data)
                },
            }
        });


    </script>


</body>

</html>